<template>
  <div>
      <div class="menuDescriptionBox">
      <i class="fa fa-question-circle-o fa-lg"></i>
      <span class="menuDescTitle">网络列表说明：</span>
      <div
        class="menuDesc"
      >在网络列表中，显示了用户的私有网络范围，包含可用的IP地址范围以及端口号的使用范围，您所创建的应用都将处于该私有网络范围之内，形成用户自己网络隔离沙盒</div>
    </div>
    <div class="tableHeader">
      <div class="tableHeaderTitle">网络列表</div>
      <div class="tableHeaderMenu">
        <el-button-group>
          <el-button icon="el-icon-refresh" @click="refreshData" size="mini"></el-button>
        </el-button-group>
      </div>
    </div>
    <el-table ref="multipleTable" :data="networkData" tooltip-effect="dark" style="width: 100%">
      <el-table-column type="index" label="序号" width="80"></el-table-column>
      <el-table-column prop="cnu_network_name" label="网络名称" width="150"></el-table-column>
      <el-table-column prop="cnu_ip_1" label="ip使用范围" width="200">
          <template slot-scope="scope">
            {{scope.row.cnu_ip_1}}.{{scope.row.cnu_ip_2}}.{{scope.row.cnu_ip_3}}.{{parseInt(scope.row.cnu_ip_4) + 1}} ~ {{scope.row.cnu_ip_1}}.{{scope.row.cnu_ip_2}}.{{scope.row.cnu_ip_3}}.255
          </template>
      </el-table-column>
      <el-table-column prop="cnu_start_port" label="端口使用范围" width="150">
          <template slot-scope="scope">
            {{scope.row.cnu_start_port}} ~ {{scope.row.cnu_end_port}}
          </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-row>
            <el-button size="mini" type="danger" @click="deleteNetwork(scope.row)">删除网络</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  //数据源
  data() {
    return {};
  },
  //初始化函数
  mounted() {
    this.initData('init');
  },
  //计算属性
  computed: {
    ...mapState({
      networkData: state => state.NetworkListModule.networkData
    })
  },
  //组件方法
  methods: {

    deleteNetwork(item){

        this.$myPop.confirmBox("确认操作","您确定要删除该应网络吗，删除前需要先删除该网络下的所有应用？",()=>{

        var params = {
          cnu_id      : item.cnu_id,
          networkName : item.cnu_network_name
        }

        this.$myLoading.startLoading()
        this.$http.postHttp(
          this.$API.dockerDeleteUserNetwork,
          params,
          rs => {
            this.$myLoading.endLoading();
            this.$myPop.SuccessMessage();
            this.initData('update');
          }
        )

      })
    },
    refreshData(){

    },
    initData(type) {  
      
      if(type == 'init'){
         this.$myLoading.startLoading();
      }
      
      this.$http.getHttp(
        this.$API.easydCloudNetworkUsedSearch + "/cnu_uid/" + this.$localData.getUserId() + "/cnu_is_delete/0",
        rs => {
      
          if(type == 'init'){
              this.$myLoading.endLoading();
          }

          this.$store.commit("NetworkListModule/updateNetworkData", rs.data);
          
        }
      );
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';
</style>